<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo4-4</title>
<link href="css/jquery-ui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$("#test").effect("clip",{mode:"hidden"}, 2000);
	});
});
</script>
<style type="text/css">
#test{
	display:none;
	height:100px;
	width:100px;
	border:1px solid blue;
	background-color:red;
}
</style>
</head>
<body>
	<div id="test"></div>
	<button>show</button>
</body>
</html>